<template>
	<d2-container>
		<template>
			<el-form class="header-area" ref="searchForm" :model="searchForm" label-width="60px" style="height: auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="姓名" prop="userName">
							<el-input type="text" v-model="searchForm.realName" placeholder="用户名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="昵称" prop="nickName">
							<el-input type="text" v-model="searchForm.nickName" placeholder="昵称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="手机号" prop="phone">
							<el-input type="text" v-model="searchForm.phone" placeholder="手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="状态" prop="status">
							<el-select v-model="searchForm.status" placeholder="请选择状态">
							    <el-option label="全部" value=""></el-option>
							    <el-option label="正常" value="0"></el-option>
								<el-option label="冻结" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="3">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm">查询</el-button>
							<el-button type="primary" plain size="medium" @click="resetForm('searchForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<template>
			<el-button slot="header" type="primary" @click="add">新建会员账户</el-button>
			
			<el-table stripe border :data="tableData" style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="70" align="center"></el-table-column>
				
				<el-table-column prop="nickName" label="用户昵称" width="220"></el-table-column>
				<el-table-column prop="phone" label="手机号" width="180"></el-table-column>
				<el-table-column prop="shopName" label="所属店铺" width="220" align="center"></el-table-column>
				
				<el-table-column prop="balance" label="账户余额" width="200" align="center"></el-table-column>
				<el-table-column prop="amountFrozen" label="冻结金额" width="150" align="center"></el-table-column>
				<el-table-column prop="amountAccumulated" label="累计充值金额" width="150" align="center"></el-table-column>
				
				<!-- <el-table-column prop="status" label="状态" width="120" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 0">正常</el-tag>
						<el-tag v-if="scope.row.status == 1">冻结</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column prop="createTime" label="开户时间" :formatter="forDateCreateTime" width="200" align="center"></el-table-column>
				
				<el-table-column fixed="right" label="操作" width="240">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="viewDetail(scope.row)">账户流水</el-button>
						<el-button type="danger" size="small" @click="accountCharge(scope.row)">充值</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<template>
			<!-- 新建账户弹窗 -->
			<add-member-account-dialog
				:isShow="showAddDialog"
				@submit="fetchData"
				@close="closeAddDialog"
			></add-member-account-dialog>
			
			<!-- 充值弹窗 -->
			<member-account-charge-dialog
				:isShow="showChargeDialog"
				:userInfo="currentItem"
				@submit="fetchData"
				@close="closeChargeDialog"
			></member-account-charge-dialog>
			
			<!-- 账户流水明细弹窗 -->
			<member-account-detail-dialog
				:isShow="showDetailDialog"
				:userInfo="currentItem"
				@close="closeDetailDialog"
			></member-account-detail-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getMemberAccountList } from '@api/shopCashierChangeShift/shopCashierChangeShift'
	import addMemberAccountDialog from './components/add-member-account-dialog'
	import memberAccountChargeDialog from './components/member-account-charge-dialog'
	import memberAccountDetailDialog from './components/member-account-detail-dialog'
	import dayjs from 'dayjs'
	export default {
		components: {
			addMemberAccountDialog,
			memberAccountChargeDialog,
			memberAccountDetailDialog,
		},
		data() {
			return {
				searchForm: {
					realName: '',
					nickName: '',
					phone: '',
					status: '',
				},
				
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				showAddDialog: false,
				showChargeDialog: false,
				showDetailDialog: false,
				currentItem: {},
			}
		},
		methods: {
			fetchData() {
				let params = {
					phone: this.searchForm.phone,
					pageNum: this.currentPage,
					pageSize: this.pageSize
				}
				getMemberAccountList(params)
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
					})
					.catch(err => {
						
					})
			},
			forDateCreateTime (row, column) {
				return row.createTime == null ? '-' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
			},
			
			resetPage() {
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
			},
			
			handleSizeChange(val) { //处理显示条数
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) { //处理翻页
				this.currentPage = val;
				this.fetchData();
			},
			forDateCreateTime (row, column) {
				return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
			},
			
			submitForm() {
				this.resetPage();
				this.fetchData();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.resetPage();
				this.fetchData();
			},
			
			//列表操作
			add() {
				this.showAddDialog = true;
			},
			closeAddDialog() {
				this.showAddDialog = false;
			},
			
			viewDetail(item) {
				this.currentItem = item;
				this.showDetailDialog = true;
			},
			closeDetailDialog() {
				this.showDetailDialog = false;
			},
			
			accountCharge(item) { //充值
				this.currentItem = item;
				this.showChargeDialog = true;
			},
			closeChargeDialog() {
				this.showChargeDialog = false;
			},
		},
		mounted() {
			this.fetchData();
		},
	}
</script>

<style>
</style>